<template>
  <section class="menu-list-wrapper">
    <ul class="menu-list">
      <li class="menu-list-item">首页首页</li>
      <li class="menu-list-item active">动环监控</li>
      <li class="menu-list-item">资产管理</li>
    </ul>
  </section>
</template>

<script>
export default {
  name: "MenuList",
  setup() {},
};
</script>

<style lang="scss">
// 媒体查询的参数
$type: screen;
$proto: max-width;
$value: 1740px;

$menuHeight: 60px;
.menu-list-wrapper {
  .menu-list {
    display: flex;
    .menu-list-item {
      color: #fff;
      height: $menuHeight;
      line-height: $menuHeight;
      padding: 0 20px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      @media #{$type} and ($proto: $value) {
        padding: 0 14px;
        font-size: 14px;
      }
      &.active {
        color: #00f6ff;
        border-bottom: 1px solid #00f6ff;
      }
    }
  }
}
</style>